<template>
<div>
    <div v-for="i in 100" :key="i"><br></div>
        <div class="item">
            <div class="p1">语文</div>
            <div class="p2">数学</div>
            <div class="p3">英语</div>
            <div class="p4">科学</div> 
    </div></div>
    
</template>
<style scoped>
.item{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    background: coral;
    height: 50px;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}
.p1,
.p2,
.p3,
.p4{
    width: 100px;
    height: 50px;
    line-height: 50px;
    color: #000;
    text-align: center;
    cursor: pointer;
}
.p2{
    background: rgb(226, 37, 37);
}
.p1:hover,
.p2:hover,
.p3:hover,
.p4:hover{
    background: #fff;
}
</style>